<template>
  <div class="largeScreen">
    <div class="header">
      <van-uploader
        :after-read="afterRead"
        accept="image/png, image/jpeg,image/jpg"
        :before-read="beforeRead"
        multiple
        v-model="fileList"
        preview-size="100px"
      />
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import ImageCompressor from "image-compressor.js";
export default {
  data() {
    return {
      fileList: [],
      // fileList: [
      //   { url: "https://img01.yzcdn.cn/vant/leaf.jpg" },
      //   {
      //     url: "https://img01.yzcdn.cn/vant/sand.jpg",
      //     deletable: true,
      //     beforeDelete: () => {
      //       Toast("自定义单个预览图片的事件和样式");
      //     },
      //   },
      //   {
      //     url: "https://img01.yzcdn.cn/vant/tree.jpg",
      //     deletable: true,
      //     imageFit: "contain",
      //   },
      // ],
    };
  },
  methods: {
    // compressFile(file) {
    //   return new Promise((resolve, reject) => {
    //     new ImageCompressor(file.file, {
    //       quality: 0.6, //压缩质量
    //       checkOrientation: false, //图片翻转，默认为false
    //       success(result) {
    //         resolve(result);
    //       },
    //       error(e) {
    //         reject(e);
    //       },
    //     });
    //   });
    // },
    async afterRead(file) {
      console.log("file", file);
      let formData = new FormData();
      if (file instanceof Array) {
        file.forEach((imgItem) => {
          // imgItem.status="uploading";
          // imgItem.message="上传中...";
          formData.append("file[]", imgItem.file);
        });
      } else {
        // file.status='uploading';
        // file.message="上传中...";
        formData.append("file", file.file);
      }
      // uploadMaterial(formData).then((res) => {
      //   if (res.code == 200) {
      //   }
      //
    },
    beforeRead(file) {
      //   验证文件类型
      // if (file.type !== "image/jpeg" && file.type!=='image/png' &&file.type!=='image/jpg') {
      //   Toast("请上传 jpg、png 或 jpeg 格式图片");
      //   return false;
      // }
      return true;
    },
  },
};
</script>
<style lang="scss" scoped>
.largeScreen {
  width: 100%;
  height: 100%;
  background: #20263b;
  .header {
    // height: 60px;
    width: 100%;
  }
}
</style>